<script setup>
import { ref } from 'vue'
import { requireImg } from '@/utils/common'

const lenged = ref([
  {
    name: '垂直激光测风雷达',
    // value: lenged1,
    value: 1,
    // radio: Number((lenged1 * 100) / total).toFixed(2)
    radio: 1
  },
  {
    name: '能见度仪',
    // value: lenged2,
    value: 1,
    // radio: Number((lenged2 * 100) / total).toFixed(2)
    radio: 1
  },

  {
    name: '小型气象站',
    // value: lenged3,
    value: 1,
    // radio: Number((lenged3 * 100) / total).toFixed(2)
    radio: 1
  }
])
const optionData = {
  color: ['#2F9CFF', '#3CE4E8', '#FFF5A0', '#FFA478', '#FF7878'],
  tooltip: {
    trigger: 'item',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    formatter: function (params) {
      return `<div>${params.name} ${params.value} 个</div>`
    }
  },
  graphic: {
    elements: [
      {
        type: 'image',
        z: 3,
        style: {
          image: requireImg('common/wxg.bg.png'),
          width: 88,
          height: 88
        },
        left: 'center',
        top: 'center'
      }
    ]
  },
  series: [
    {
      name: '',
      type: 'pie',
      clockWise: false,
      radius: [48, 60],
      center: ['50%', '50%'],
      hoverAnimation: true,
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      data: lenged.value
    }
  ]
}
const option = ref(optionData)
const flag = ref(false)
const ChartsClick = () => {
  flag.value = true
}
</script>

<template>
  <div class="card">
    <CommonTitle title="气象设备列表" />
    <div id="iframe" v-if="flag">
      <img id="close" src="@img/pop/close_icon.png" @click="flag = false" alt="" />
      <iframe id="iframe" src="http://dz5.zy1949.com/" frameborder="0"></iframe>
    </div>
    <div class="conten_box">
      <div class="Charts" @click="ChartsClick">
        <Charts :option="option" container="1" />
      </div>
      <div class="right">
        <div :class="['item', 'item1']">
          <span class="item1"></span>
          <p><span class="title">垂直激光测风雷达</span><span style="color: #2897ff"> 1个</span></p>
          <p><NumberAnimate :count="33"></NumberAnimate><span>33%</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  .conten_box {
    display: flex;
    align-items: center;
  }
  #iframe {
    width: 100vw;
    height: calc(100vh - 60px);
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 9999;
    bottom: 0;
  }
  #close {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 70px;
    right: 0;
    background-color: #000;
    z-index: 99999;
  }
  margin-top: 15px;
  .Charts {
    width: 160px;
    height: 160px;
    margin: 0 10px;
    background: center center url('@img/infrastructure/echart_bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .right {
    width: 110px;
    height: 160px;
    font-size: 16px;
    font-weight: 400;
    .title {
      font-family:
        PingFangSC,
        PingFang SC;
      color: #85b9cb;
      line-height: 40px;
      text-align: left;
      font-style: normal;
    }
  }
  .item {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;

    p:first-child {
      display: block;
      color: #85b9cb;
      width: 100%;

      span:last-child {
        color: #2897ff;
        margin-left: 5px;
      }
    }

    p:last-child {
      font-family: DINAlternate;
      font-size: 23px;
      margin-top: 10px;

      span {
        margin-left: 5px;
        color: #85b9cb;
        font-size: 14px;
        font-family: PingFang;
      }
    }

    &.item1 {
      background: left url('@img/infrastructure/lenged01.png') no-repeat;
      background-size: 15px 72px;
    }
  }
}
</style>
